// SCSS variables are information about icon's compiled state, stored under its original file name
//
// .icon-home {
//   width: $icon-home-width;
// }
//
// The large array-like variables contain all information about a single icon
// $icon-home: x y offset_x offset_y width height total_width total_height image_path;
//
// At the bottom of this section, we provide information about the spritesheet itself
// $spritesheet: width height image $spritesheet-sprites;
$add-rule-name: 'add_rule';
$add-rule-x: 0px;
$add-rule-y: 0px;
$add-rule-offset-x: 0px;
$add-rule-offset-y: 0px;
$add-rule-width: 100px;
$add-rule-height: 100px;
$add-rule-total-width: 400px;
$add-rule-total-height: 320px;
$add-rule-image: '~assets/img/sprite.png';
$add-rule: (0px, 0px, 0px, 0px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'add_rule', );
$bind-rule-name: 'bind_rule';
$bind-rule-x: 300px;
$bind-rule-y: 100px;
$bind-rule-offset-x: -300px;
$bind-rule-offset-y: -100px;
$bind-rule-width: 100px;
$bind-rule-height: 100px;
$bind-rule-total-width: 400px;
$bind-rule-total-height: 320px;
$bind-rule-image: '~assets/img/sprite.png';
$bind-rule: (300px, 100px, -300px, -100px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'bind_rule', );
$birth-rule-name: 'birth_rule';
$birth-rule-x: 0px;
$birth-rule-y: 100px;
$birth-rule-offset-x: 0px;
$birth-rule-offset-y: -100px;
$birth-rule-width: 100px;
$birth-rule-height: 100px;
$birth-rule-total-width: 400px;
$birth-rule-total-height: 320px;
$birth-rule-image: '~assets/img/sprite.png';
$birth-rule: (0px, 100px, 0px, -100px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'birth_rule', );
$dispose-btn-name: 'dispose_btn';
$dispose-btn-x: 284px;
$dispose-btn-y: 300px;
$dispose-btn-offset-x: -284px;
$dispose-btn-offset-y: -300px;
$dispose-btn-width: 10px;
$dispose-btn-height: 10px;
$dispose-btn-total-width: 400px;
$dispose-btn-total-height: 320px;
$dispose-btn-image: '~assets/img/sprite.png';
$dispose-btn: (284px, 300px, -284px, -300px, 10px, 10px, 400px, 320px, '~assets/img/sprite.png', 'dispose_btn', );
$down-btn-name: 'down_btn';
$down-btn-x: 264px;
$down-btn-y: 300px;
$down-btn-offset-x: -264px;
$down-btn-offset-y: -300px;
$down-btn-width: 10px;
$down-btn-height: 10px;
$down-btn-total-width: 400px;
$down-btn-total-height: 320px;
$down-btn-image: '~assets/img/sprite.png';
$down-btn: (264px, 300px, -264px, -300px, 10px, 10px, 400px, 320px, '~assets/img/sprite.png', 'down_btn', );
$evaluate-rule-name: 'evaluate_rule';
$evaluate-rule-x: 200px;
$evaluate-rule-y: 100px;
$evaluate-rule-offset-x: -200px;
$evaluate-rule-offset-y: -100px;
$evaluate-rule-width: 100px;
$evaluate-rule-height: 100px;
$evaluate-rule-total-width: 400px;
$evaluate-rule-total-height: 320px;
$evaluate-rule-image: '~assets/img/sprite.png';
$evaluate-rule: (200px, 100px, -200px, -100px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'evaluate_rule', );
$fullpresent-rule-name: 'fullpresent_rule';
$fullpresent-rule-x: 0px;
$fullpresent-rule-y: 200px;
$fullpresent-rule-offset-x: 0px;
$fullpresent-rule-offset-y: -200px;
$fullpresent-rule-width: 100px;
$fullpresent-rule-height: 100px;
$fullpresent-rule-total-width: 400px;
$fullpresent-rule-total-height: 320px;
$fullpresent-rule-image: '~assets/img/sprite.png';
$fullpresent-rule: (0px, 200px, 0px, -200px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'fullpresent_rule', );
$holiday-rule-name: 'holiday_rule';
$holiday-rule-x: 100px;
$holiday-rule-y: 200px;
$holiday-rule-offset-x: -100px;
$holiday-rule-offset-y: -200px;
$holiday-rule-width: 100px;
$holiday-rule-height: 100px;
$holiday-rule-total-width: 400px;
$holiday-rule-total-height: 320px;
$holiday-rule-image: '~assets/img/sprite.png';
$holiday-rule: (100px, 200px, -100px, -200px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'holiday_rule', );
$invoice-add-left1-name: 'invoice_add_left1';
$invoice-add-left1-x: 232px;
$invoice-add-left1-y: 300px;
$invoice-add-left1-offset-x: -232px;
$invoice-add-left1-offset-y: -300px;
$invoice-add-left1-width: 16px;
$invoice-add-left1-height: 16px;
$invoice-add-left1-total-width: 400px;
$invoice-add-left1-total-height: 320px;
$invoice-add-left1-image: '~assets/img/sprite.png';
$invoice-add-left1: (232px, 300px, -232px, -300px, 16px, 16px, 400px, 320px, '~assets/img/sprite.png', 'invoice_add_left1', );
$invoice-add-left2-name: 'invoice_add_left2';
$invoice-add-left2-x: 216px;
$invoice-add-left2-y: 300px;
$invoice-add-left2-offset-x: -216px;
$invoice-add-left2-offset-y: -300px;
$invoice-add-left2-width: 16px;
$invoice-add-left2-height: 16px;
$invoice-add-left2-total-width: 400px;
$invoice-add-left2-total-height: 320px;
$invoice-add-left2-image: '~assets/img/sprite.png';
$invoice-add-left2: (216px, 300px, -216px, -300px, 16px, 16px, 400px, 320px, '~assets/img/sprite.png', 'invoice_add_left2', );
$invoice-add-right1-name: 'invoice_add_right1';
$invoice-add-right1-x: 200px;
$invoice-add-right1-y: 300px;
$invoice-add-right1-offset-x: -200px;
$invoice-add-right1-offset-y: -300px;
$invoice-add-right1-width: 16px;
$invoice-add-right1-height: 16px;
$invoice-add-right1-total-width: 400px;
$invoice-add-right1-total-height: 320px;
$invoice-add-right1-image: '~assets/img/sprite.png';
$invoice-add-right1: (200px, 300px, -200px, -300px, 16px, 16px, 400px, 320px, '~assets/img/sprite.png', 'invoice_add_right1', );
$invoice-add-right2-name: 'invoice_add_right2';
$invoice-add-right2-x: 248px;
$invoice-add-right2-y: 300px;
$invoice-add-right2-offset-x: -248px;
$invoice-add-right2-offset-y: -300px;
$invoice-add-right2-width: 16px;
$invoice-add-right2-height: 16px;
$invoice-add-right2-total-width: 400px;
$invoice-add-right2-total-height: 320px;
$invoice-add-right2-image: '~assets/img/sprite.png';
$invoice-add-right2: (248px, 300px, -248px, -300px, 16px, 16px, 400px, 320px, '~assets/img/sprite.png', 'invoice_add_right2', );
$member-rule-name: 'member_rule';
$member-rule-x: 300px;
$member-rule-y: 200px;
$member-rule-offset-x: -300px;
$member-rule-offset-y: -200px;
$member-rule-width: 100px;
$member-rule-height: 100px;
$member-rule-total-width: 400px;
$member-rule-total-height: 320px;
$member-rule-image: '~assets/img/sprite.png';
$member-rule: (300px, 200px, -300px, -200px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'member_rule', );
$menu-smstemplate-name: 'menu__smstemplate';
$menu-smstemplate-x: 160px;
$menu-smstemplate-y: 300px;
$menu-smstemplate-offset-x: -160px;
$menu-smstemplate-offset-y: -300px;
$menu-smstemplate-width: 20px;
$menu-smstemplate-height: 20px;
$menu-smstemplate-total-width: 400px;
$menu-smstemplate-total-height: 320px;
$menu-smstemplate-image: '~assets/img/sprite.png';
$menu-smstemplate: (160px, 300px, -160px, -300px, 20px, 20px, 400px, 320px, '~assets/img/sprite.png', 'menu__smstemplate', );
$menu-guides-name: 'menu_guides';
$menu-guides-x: 20px;
$menu-guides-y: 300px;
$menu-guides-offset-x: -20px;
$menu-guides-offset-y: -300px;
$menu-guides-width: 20px;
$menu-guides-height: 20px;
$menu-guides-total-width: 400px;
$menu-guides-total-height: 320px;
$menu-guides-image: '~assets/img/sprite.png';
$menu-guides: (20px, 300px, -20px, -300px, 20px, 20px, 400px, 320px, '~assets/img/sprite.png', 'menu_guides', );
$menu-home-name: 'menu_home';
$menu-home-x: 60px;
$menu-home-y: 300px;
$menu-home-offset-x: -60px;
$menu-home-offset-y: -300px;
$menu-home-width: 20px;
$menu-home-height: 20px;
$menu-home-total-width: 400px;
$menu-home-total-height: 320px;
$menu-home-image: '~assets/img/sprite.png';
$menu-home: (60px, 300px, -60px, -300px, 20px, 20px, 400px, 320px, '~assets/img/sprite.png', 'menu_home', );
$menu-integral-name: 'menu_integral';
$menu-integral-x: 80px;
$menu-integral-y: 300px;
$menu-integral-offset-x: -80px;
$menu-integral-offset-y: -300px;
$menu-integral-width: 20px;
$menu-integral-height: 20px;
$menu-integral-total-width: 400px;
$menu-integral-total-height: 320px;
$menu-integral-image: '~assets/img/sprite.png';
$menu-integral: (80px, 300px, -80px, -300px, 20px, 20px, 400px, 320px, '~assets/img/sprite.png', 'menu_integral', );
$menu-member-name: 'menu_member';
$menu-member-x: 100px;
$menu-member-y: 300px;
$menu-member-offset-x: -100px;
$menu-member-offset-y: -300px;
$menu-member-width: 20px;
$menu-member-height: 20px;
$menu-member-total-width: 400px;
$menu-member-total-height: 320px;
$menu-member-image: '~assets/img/sprite.png';
$menu-member: (100px, 300px, -100px, -300px, 20px, 20px, 400px, 320px, '~assets/img/sprite.png', 'menu_member', );
$menu-order-name: 'menu_order';
$menu-order-x: 120px;
$menu-order-y: 300px;
$menu-order-offset-x: -120px;
$menu-order-offset-y: -300px;
$menu-order-width: 20px;
$menu-order-height: 20px;
$menu-order-total-width: 400px;
$menu-order-total-height: 320px;
$menu-order-image: '~assets/img/sprite.png';
$menu-order: (120px, 300px, -120px, -300px, 20px, 20px, 400px, 320px, '~assets/img/sprite.png', 'menu_order', );
$menu-pointshop-name: 'menu_pointshop';
$menu-pointshop-x: 140px;
$menu-pointshop-y: 300px;
$menu-pointshop-offset-x: -140px;
$menu-pointshop-offset-y: -300px;
$menu-pointshop-width: 20px;
$menu-pointshop-height: 20px;
$menu-pointshop-total-width: 400px;
$menu-pointshop-total-height: 320px;
$menu-pointshop-image: '~assets/img/sprite.png';
$menu-pointshop: (140px, 300px, -140px, -300px, 20px, 20px, 400px, 320px, '~assets/img/sprite.png', 'menu_pointshop', );
$menu-receipt-name: 'menu_receipt';
$menu-receipt-x: 0px;
$menu-receipt-y: 300px;
$menu-receipt-offset-x: 0px;
$menu-receipt-offset-y: -300px;
$menu-receipt-width: 20px;
$menu-receipt-height: 20px;
$menu-receipt-total-width: 400px;
$menu-receipt-total-height: 320px;
$menu-receipt-image: '~assets/img/sprite.png';
$menu-receipt: (0px, 300px, 0px, -300px, 20px, 20px, 400px, 320px, '~assets/img/sprite.png', 'menu_receipt', );
$menu-shop-name: 'menu_shop';
$menu-shop-x: 180px;
$menu-shop-y: 300px;
$menu-shop-offset-x: -180px;
$menu-shop-offset-y: -300px;
$menu-shop-width: 20px;
$menu-shop-height: 20px;
$menu-shop-total-width: 400px;
$menu-shop-total-height: 320px;
$menu-shop-image: '~assets/img/sprite.png';
$menu-shop: (180px, 300px, -180px, -300px, 20px, 20px, 400px, 320px, '~assets/img/sprite.png', 'menu_shop', );
$menu-system-name: 'menu_system';
$menu-system-x: 40px;
$menu-system-y: 300px;
$menu-system-offset-x: -40px;
$menu-system-offset-y: -300px;
$menu-system-width: 20px;
$menu-system-height: 20px;
$menu-system-total-width: 400px;
$menu-system-total-height: 320px;
$menu-system-image: '~assets/img/sprite.png';
$menu-system: (40px, 300px, -40px, -300px, 20px, 20px, 400px, 320px, '~assets/img/sprite.png', 'menu_system', );
$receipt-rule-name: 'receipt_rule';
$receipt-rule-x: 300px;
$receipt-rule-y: 0px;
$receipt-rule-offset-x: -300px;
$receipt-rule-offset-y: 0px;
$receipt-rule-width: 100px;
$receipt-rule-height: 100px;
$receipt-rule-total-width: 400px;
$receipt-rule-total-height: 320px;
$receipt-rule-image: '~assets/img/sprite.png';
$receipt-rule: (300px, 0px, -300px, 0px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'receipt_rule', );
$register-rule-name: 'register_rule';
$register-rule-x: 200px;
$register-rule-y: 200px;
$register-rule-offset-x: -200px;
$register-rule-offset-y: -200px;
$register-rule-width: 100px;
$register-rule-height: 100px;
$register-rule-total-width: 400px;
$register-rule-total-height: 320px;
$register-rule-image: '~assets/img/sprite.png';
$register-rule: (200px, 200px, -200px, -200px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'register_rule', );
$share-rule-name: 'share_rule';
$share-rule-x: 200px;
$share-rule-y: 0px;
$share-rule-offset-x: -200px;
$share-rule-offset-y: 0px;
$share-rule-width: 100px;
$share-rule-height: 100px;
$share-rule-total-width: 400px;
$share-rule-total-height: 320px;
$share-rule-image: '~assets/img/sprite.png';
$share-rule: (200px, 0px, -200px, 0px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'share_rule', );
$sign-out-btn-name: 'sign_out_btn';
$sign-out-btn-x: 274px;
$sign-out-btn-y: 300px;
$sign-out-btn-offset-x: -274px;
$sign-out-btn-offset-y: -300px;
$sign-out-btn-width: 10px;
$sign-out-btn-height: 10px;
$sign-out-btn-total-width: 400px;
$sign-out-btn-total-height: 320px;
$sign-out-btn-image: '~assets/img/sprite.png';
$sign-out-btn: (274px, 300px, -274px, -300px, 10px, 10px, 400px, 320px, '~assets/img/sprite.png', 'sign_out_btn', );
$sing-rule-name: 'sing_rule';
$sing-rule-x: 100px;
$sing-rule-y: 100px;
$sing-rule-offset-x: -100px;
$sing-rule-offset-y: -100px;
$sing-rule-width: 100px;
$sing-rule-height: 100px;
$sing-rule-total-width: 400px;
$sing-rule-total-height: 320px;
$sing-rule-image: '~assets/img/sprite.png';
$sing-rule: (100px, 100px, -100px, -100px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'sing_rule', );
$vipcn-rule-name: 'vipcn_rule';
$vipcn-rule-x: 100px;
$vipcn-rule-y: 0px;
$vipcn-rule-offset-x: -100px;
$vipcn-rule-offset-y: 0px;
$vipcn-rule-width: 100px;
$vipcn-rule-height: 100px;
$vipcn-rule-total-width: 400px;
$vipcn-rule-total-height: 320px;
$vipcn-rule-image: '~assets/img/sprite.png';
$vipcn-rule: (100px, 0px, -100px, 0px, 100px, 100px, 400px, 320px, '~assets/img/sprite.png', 'vipcn_rule', );
$spritesheet-width: 400px;
$spritesheet-height: 320px;
$spritesheet-image: '~assets/img/sprite.png';
$spritesheet-sprites: ($add-rule, $bind-rule, $birth-rule, $dispose-btn, $down-btn, $evaluate-rule, $fullpresent-rule, $holiday-rule, $invoice-add-left1, $invoice-add-left2, $invoice-add-right1, $invoice-add-right2, $member-rule, $menu-smstemplate, $menu-guides, $menu-home, $menu-integral, $menu-member, $menu-order, $menu-pointshop, $menu-receipt, $menu-shop, $menu-system, $receipt-rule, $register-rule, $share-rule, $sign-out-btn, $sing-rule, $vipcn-rule, );
$spritesheet: (400px, 320px, '~assets/img/sprite.png', $spritesheet-sprites, );

// The provided mixins are intended to be used with the array-like variables
//
// .icon-home {
//   @include sprite-width($icon-home);
// }
//
// .icon-email {
//   @include sprite($icon-email);
// }
//
// Example usage in HTML:
//
// `display: block` sprite:
// <div class="icon-home"></div>
//
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
//
// // CSS
// .icon {
//   display: inline-block;
// }
//
// // HTML
// <i class="icon icon-home"></i>
@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

// The `sprites` mixin generates identical output to the CSS template
//   but can be overridden inside of SCSS
//
// @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}
